import React from "react";
import { Box, Tabs, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
import SignUp from "./components/SignUp";
import SignIn from "./components/SignIn";

function App () {
  return (
    <Box
      style={{ width: "400px", margin: "100px auto" }}
      bgColor="#fff"
      px="50px"
      pt="50px"
      pb="30px"
    >
      <Tabs>
        <TabList
          border="none"
          mb="50px"
          justifyContent="center"
          color="#969696"
        >
          <Tab
            _focus={{ boxShadow: "none" }}
            _active={{ bgColor: "#fff" }}
            _hover={{ borderBottom: "2px solid #ea6f5a" }}
            _selected={{
              borderBottom: "2px solid #ea6f5a",
              fontWeight: "bold",
              color: "#ea6f5a",
            }}
            fontSize="18px"
          >
            登录
          </Tab>
          <Box p="10px">
            <span>·</span>
          </Box>
          <Tab
            _focus={{ boxShadow: "none" }}
            _active={{ bgColor: "#fff" }}
            _hover={{ borderBottom: "2px solid #ea6f5a" }}
            _selected={{
              borderBottom: "2px solid #ea6f5a",
              fontWeight: "bold",
              color: "#ea6f5a",
            }}
            fontSize="18px"
          >
            注册
          </Tab>
        </TabList>
        <TabPanels>
          <TabPanel px="0">
            <SignIn />
          </TabPanel>
          <TabPanel px="0">
            <SignUp />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}

export default App;
